<!--  -->
<template>
  <el-container>
    <div class="page-main-body-box">
      <div class="meedu-main-body">
        <div class="float-left j-b-flex mb-30">
          <div class="d-flex">
            <el-button type="primary">批量操作</el-button>
          </div>
          <div class="d-flex">
            <div class="ml-10">
              <el-input v-model="input" placeholder="学院ID"></el-input>
            </div>
            <div class="ml-10">
              <el-select v-model="form.region" placeholder="全部">
                <el-option label="待处理" value="0"></el-option>
                <el-option label="已处理" value="1"></el-option>
                <el-option label="已驳回" value="2"></el-option>
              </el-select>
            </div>
            <div class="ml-10">
              <el-button @click="gotoEmpty()">清空</el-button>
            </div>
            <div class="ml-10">
              <el-button type="primary" @click="filTering()">筛选</el-button>
            </div>
          </div>
        </div>
        <div class="float-left">
          <div class="float-left">
            <el-table el-table-column ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark"
              style="width: 100%" @select="Gtovluse">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column label="ID" prop="id" width="120"> </el-table-column>
              <el-table-column prop="user_id" label="学员ID" width="120"> </el-table-column>
              <el-table-column prop="address" label="学员" width="300">
                <template slot-scope="scope">
                  <img :src="users[tableData[scope.$index].user_id].avatar" alt="" style="
                      width: 40px;
                      height: 40px;
                      border-radius: 50%;
                      margin-right: 8px;
                      float: left;
                    " />
                  <div style="float: left; line-height: 40px">
                    {{ users[tableData[scope.$index].user_id].nick_name }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="" label="提现金额" width="120">
                <template slot-scope="scope">
                  {{ tableData[scope.$index].before_balance }}元
                </template>
              </el-table-column>
              <el-table-column prop="address" label="打款信息" width="300">
                <template slot-scope="scope">
                  <div>渠道:{{ tableData[scope.$index].channel }}</div>
                  <div>姓名:{{ tableData[scope.$index].channel_name }}</div>
                  <div>账号:{{ tableData[scope.$index].total }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="状态" width="150">
                <template slot-scope="scope">
                  <div v-if="tableData[scope.$index].status == '2'" class="tag"
                    style="color: #f56c6c; background-color: #fef0f0; border-color: #fde2e2">
                    已驳回
                  </div>
                  <div v-else-if="tableData[scope.$index].status == '1'" class="tag"
                    style="background-color: #f4f4f5; color: #909399">
                    已处理
                  </div>
                  <div v-else class="tag" style="color: #409eff">待处理</div>
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="备注" width="200"> </el-table-column>
              <el-table-column prop="address" label="添加时间" width="200">
                <template slot-scope="scope">
                  {{ new Date(tableData[scope.$index].created_at).toLocaleString() }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="float-left text-center mt-30">
          <el-pagination :current-page="currentPage1" :page-sizes="[10, 20, 50, 100]" :page-size="10"
            layout="total, sizes, prev, pager, next, jumper" :total="sizeChang.total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </div>
    </div>
  </el-container>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { withdrawal } from "@/network/order";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      loading: true,
      input: "",
      form: { region: "" },
      params: {
        user_id: "",
        status: -1,
        keywords: "",
        page: 1,
        size: 10,
      },
      tableData: [],
      sizeChang: 0,
      users: [],
      currentPage1: 1,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    balance() {
      withdrawal(this.params).then((res) => {
        this.loading = false;
        this.tableData = res.data.orders.data;
        this.users = res.data.users;
        this.sizeChang = res.data.orders;
      });
    },
    gotoEmpty() {
      this.form.region = "";
      this.input = "";
      this.loading = true;
      this.filTering();
    },
    handleSizeChange(pageSize) {
      this.loading = true;
      this.params.size = pageSize;
      this.balance();
    },
    handleCurrentChange(page) {
      this.loading = true;
      this.params.page = page;
      this.balance();
    },
    filTering() {
      this.loading = true;
      this.params.user_id = this.input;
      this.params.status = this.form.region || -1;
      withdrawal(this.params).then((res) => {
        this.loading = false;
        this.tableData = res.data.orders.data;
        this.users = res.data.users;
        this.sizeChang = res.data.orders;
      });
    },
    Gtovluse() {
      console.log(arguments);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.balance();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
.page-main-body-box {
  flex: 1;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 5px 20px 20px;
  overflow-y: auto;
  background-color: #f1f2f9;

  .meedu-main-body {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 90px;
    box-shadow: 0 2px 4px 0 hsl(0deg 0% 40% / 5%);
    min-width: 1180px;
  }
}

.float-left {
  width: 100%;
  height: auto;
  float: left;
}

.mt-30 {
  margin-top: 30px;
}

.d-flex {
  display: flex;
  align-items: center;
}

.j-b-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mb-30 {
  margin-bottom: 30px;
}

.ml-10 {
  margin-left: 10px;
}

::v-deep.el-table thead tr th {
  background-color: #f1f2f9;
  color: black;
  height: 70px;
}

.tag {
  background-color: #ecf5ff;
  border-color: #d9ecff;
  height: 32px;
  padding: 0 10px;
  line-height: 30px;
  font-size: 12px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
  width: 57px;
}

.text-center {
  text-align: center;
}
</style>
